/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <s-header :name="'订单详情'" @callback="close"></s-header>
    <div class="main-content">
      <div class="order-info">
        <van-card
          v-for="item in orderItem.list"
          :key="item.goodsId"
          class="goods-row"
          :num="item.quantity"
          :price="(item.price/100).toFixed(2)"
          desc="全场包邮"
          :title="item.name"
          :thumb="item.squarePic"
        />
      </div>
      <div class="cost-info-rows">
        <div class="cost-info-row">
          <div class="cost-info-left">商品金额</div>
          <div class="cost-info-right">￥{{ costSum }}</div>
        </div>
        <div class="cost-info-row">
          <div class="cost-info-left">总运费</div>
          <div class="cost-info-right">满XX元 免邮</div>
        </div>
        <div class="cost-info-row">
          <div class="cost-info-left">优惠券</div>
          <view class="cost-info-right">无可用券</view>
        </div>
      </div>
    </div>
    <div class="bottom-wrapper">
      <div class="bottom-split"></div>
      <div class="btn-row">
        <div class="del-order" @click="delOrderWithConfirm(orderItem.orderId)">
          删除订单
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import sHeader from '@/components/MyHeader'
import { queryOrder, delOrder } from '@/service/axios-services'
import { Dialog, Toast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
export default {
  name: 'OrderDetail',
  components: {
    sHeader
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      orderItem: {},
      showPay: false,
      costSum: 0
    })

    onMounted(async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      const { id } = route.query
      const { data } = await queryOrder(id)
      state.orderItem = data
      var costSum = 0
      for (var i = 0; i < data.list.length; i++) {
        costSum += (data.list[i].quantity * data.list[i].price) / 100
      }
      state.costSum = costSum
      Toast.clear()
    })

    const delOrderWithConfirm = (id) => {
      Dialog.confirm({
        title: '确认删除当前订单么？'
      }).then(() => {
        delOrder(id).then((res) => {
          if (res.code == 0) {
            router.back()
          }
        })
      })
    }

    const close = () => {
      Dialog.close()
    }

    return {
      ...toRefs(state),
      delOrderWithConfirm,
      close
    }
  }
}
</script>

<style>
.page-wrapper {
  background: #f4f4f4;
  font-size: 14px;
}
.main-content {
  display: flex;
  flex-direction: column;
}
.order-info {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 12px;
}
.goods-row {
  display: flex;
  flex-direction: row;
  margin-top: 18px;
  background-color: #fff;
}
.cost-info-rows {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 50px;
}

.cost-info-row {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}

.cost-info-left {
  color: #595d65;
  flex: 1;
}

.cost-info-right {
  color: #222222;
}
.bottom-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  background-color: white;
}
.bottom-split {
  background-color: #dfdfdf;
  height: 1px;
}
.btn-row {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
  justify-content: flex-end;
}

.del-order {
  margin-right: 20px;
  border-radius: 15px;
  padding: 3px 12px;
  color: #575e64;
  border: 1px solid #ebebeb;
}
</style>
